<template>
	<div>
		<el-alert title="消息提示的文案" type="info">
		</el-alert>
		
		<el-table :data="competitionList" stripe style="width: 100%">
			<el-table-column prop="cname" label="比赛名称" width="180">
			</el-table-column>
			<el-table-column prop="detail" label="比赛详情" width="180">
			</el-table-column>
			<el-table-column prop="startTime" label="报名开始时间" width="200">
			</el-table-column>
			<el-table-column prop="endTime" label="报名结束时间" width="200">
			</el-table-column>
			<el-table-column prop="createTime" label="比赛创建时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="primary"   @click="join(scope.$index, scope.row)">参赛</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	
	export default {
		name: "Join",
		data() {
			return {
				competitionList: [],
				now: new Date(),
				user: JSON.parse(window.sessionStorage.getItem("user")),
				howTime:"",
			}
		},
		
		mounted() {
			this.initCompetitionList();
		},
		methods: {
			initCompetitionList() {
				this.getRequest("/competition/").then(res => {
					if (res) {
						this.competitionList = res.obj;
						for(let i=0;i<res.obj.length;i++){
							this.showtime(res.obj[i].startTime);
						}
					}
				})
			},
			join(index, data) {
				let endTime = new Date(data.endTime).getTime();
				let startTime = new Date(data.startTime).getTime();
				if (endTime < this.now.getTime()) {
					return this.$message({
						message: '该比赛已经结束了哦',
						type: 'warning'
					});
				} else if (startTime > this.now.getTime()) {
					return this.$message({
						message: '该比赛还未开始哦',
						type: 'warning'
					});
				} else {

					this.putRequest("/users/join?userId=" + this.user.id + "&competitionId=" + data.id).then(res => {
						return;
					})
				}
			}
		},

	}
</script>

<style>
</style>
